<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item >订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>入住单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setState">
            <span class="el-dropdown-link">
              {{stateStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{title:'入住状态',id:''}">全部</el-dropdown-item>
              <el-dropdown-item :command="{title:'待入住',id:'0'}">待入住</el-dropdown-item>
              <el-dropdown-item :command="{title:'入住中',id:'1'}">入住中</el-dropdown-item>
              <el-dropdown-item :command="{title:'待打扫房间',id:'2'}">待打扫房间</el-dropdown-item>
              <el-dropdown-item :command="{title:'待账单确认',id:'3'}">待账单确认</el-dropdown-item>
              <el-dropdown-item :command="{title:'退房',id:'4'}">退房</el-dropdown-item>
              <el-dropdown-item :command="{title:'用户提交结账',id:'5'}">用户提交结账</el-dropdown-item>
              <el-dropdown-item :command="{title:'押金支付成功',id:'6'}">押金支付成功</el-dropdown-item>
              <el-dropdown-item :command="{title:'已取消',id:'7'}">已取消</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setSource">
            <span class="el-dropdown-link">
              {{sourceTitle}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ 'key' : 'source', value: '', title: '全部来源' }">全部来源</el-dropdown-item>
              <div v-for="item in addSourcel"
                :key="item.id">
                <el-dropdown-item :command="{ 'key' : 'source', value: item.id, title: item.sourcel }">{{item.sourcel}}</el-dropdown-item>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-dropdown @command="setDeposit"
            style="margin-left:15px">
            <span class="el-dropdown-link">
              {{depositTile}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{ value: '', title: '全部押金状态' }">全部押金状态</el-dropdown-item>
              <el-dropdown-item :command="{ value: '1', title: '押金已付' }">押金已付</el-dropdown-item>
              <el-dropdown-item :command="{ value: '2', title: '押金未付' }">押金未付</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入酒店名称/订单号"
            clearable
            v-model="search"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入账单号"
            clearable
            v-model="bills"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入入住人姓名"
            clearable
            v-model="name"></el-input>
        </el-form-item>
        <div class="order-warpper">
          <el-form-item>
            <el-dropdown @command="setDate">
              <span class="el-dropdown-link">
                {{dateStr}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{title:'日期类型',id:''}">全部</el-dropdown-item>
                <el-dropdown-item :command="{title:'入店日期',id:'1'}">入店日期</el-dropdown-item>
                <el-dropdown-item :command="{title:'离店日期',id:'2'}">离店日期</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="formDates"
              type="daterange"
              :clearable="false"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :disabled="isDisable"
              @change="timeSearch">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-form-item>
              <el-button type="primary"
                @click.native="searchCheckList"
                class="searc"
                style=" line-height: 32px;padding: 0 21px;">
                <i class="el-icon-search"></i>
              </el-button>
            </el-form-item>
          </el-form-item>
        </div>
        <el-form-item v-show="validOrder"
          style="margin-bottom:0">
          <div class="validOrder"
            style="font-size:12px">
            <p>有效订单：营业额￥{{validOrder.validSumMoney }}（房费：￥{{validOrder.validRoomMoney}}、消费：￥{{validOrder.validExpend }}、超额待收金额：￥{{validOrder.validOverstep }}）； 总押金￥{{validOrder.validDeposit }}（已退金额：￥{{validOrder.validRefund }}、账存金额：￥{{validOrder.validNoRefund}}）；推荐奖励：￥{{validOrder.validWard}}</p>
            <p>取消订单：营业额￥{{cancelOrder.sumMoney}}（房费：￥{{cancelOrder.roomMoney}}，押金：￥{{cancelOrder.deposit}}，已退金额：￥{{cancelOrder.refund}}）</p>
          </div>
        </el-form-item>
      </el-form>
      <el-form>
         <el-form-item>
          <el-table :data="checkList"
            class="easy-table"
            max-height="550">
            <el-table-column prop="orderNum"
              label="订单号"
              fixed
              width="200">
            </el-table-column>
            <el-table-column prop="bills"
              label="账单号"
              width="100">
            </el-table-column>
            <el-table-column prop="hotel"
              label="酒店名称"
              width="150">
            </el-table-column>
            <el-table-column prop="state"
              label="入住状态">
              <template slot-scope="scope">
                <div type="text"
                  v-if="scope.row.state == 0">待入住</div>
                <div type="text"
                  v-else-if="scope.row.state == 1">入住中</div>
                <div type="text"
                  v-else-if="scope.row.state == 2">待打扫房间</div>
                <div type="text"
                  v-else-if="scope.row.state == 3">待账单确认</div>
                <div type="text"
                  v-else-if="scope.row.state == 4">退房</div>
                <div type="text"
                  v-else-if="scope.row.state == 5">用户提交结账</div>
                <div type="text"
                  v-else-if="scope.row.state == 6">押金已支付</div>
                <div type="text"
                  v-else-if="scope.row.state == 7">已取消</div>
              </template>
            </el-table-column>
            <el-table-column label="入住人"
              width="100"
              prop="person">
            </el-table-column>
            <el-table-column prop="room"
              label="房型"
              width="100">
              <template slot-scope="scope">
                <span>{{scope.row.room?scope.row.room:'-'}}</span>
              </template>
            </el-table-column>
            <el-table-column label="入离时间"
              width="100"
              prop="startEndTime">
              <template slot-scope="scope">
                <span>{{scope.row.startEndTime ? scope.row.startEndTime.split('/')[0] : ''}}</span><br>
                <span>{{scope.row.startEndTime ? scope.row.startEndTime.split('/')[1] : ''}}</span>
              </template>
            </el-table-column>
            <el-table-column label="房间号"
              width="100"
              prop="roomNum">
            </el-table-column>
            <el-table-column prop="roomPrice"
              label="房价"
              width="50">
            </el-table-column>
            <el-table-column label="总消费"
              width="100"
              prop="moneySum">
              <template slot-scope="scope">
                <span style="color:red">￥{{scope.row.moneySum}}</span>
              </template>
            </el-table-column>

            <el-table-column label="房费"
              width="100"
              prop="roomPrice">
            </el-table-column>

            <el-table-column label="押金"
              width="100"
              prop="deposit">
            </el-table-column>
            <el-table-column label="退还金额"
              width="100"
              prop="unpaid">
            </el-table-column>
            <el-table-column label="分销奖励金额"
              width="100"
              prop="sellMoney">
            </el-table-column>
            <el-table-column prop="source"
              label="渠道"
              width="150">
            </el-table-column>
            <el-table-column label="操作"
              fixed="right"
              width="150">
              <template slot-scope="scope">
                <el-button type="text"
                  size="small"
                  @click="particulars(scope.row.id)">查看详情</el-button>
                <el-button type="text"
                  size="small"
                  v-if="scope.row.state ==1"
                  @click="checkOut(scope.row.id)">立即退房</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
       
        <el-form-item class="fr">
          <el-pagination @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, prev , pager , next, sizes"
            :total="counts"
            style="margin-top:20px">
          </el-pagination>
        </el-form-item>
      </el-form>
      <el-dialog width="20%"
        title="备注"
        :visible.sync="showRemark">
        <el-form>
          <el-form-item label="备注">
            <el-input type="textarea"
              v-model="remark"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer"
          class="dialog-footer">
          <el-button type="primary"
            @click="updateMark">确 定</el-button>
          <el-button @click="showRemark = false">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getOrders, updateMark, geSourceList } from "../../public/js/order";
import { getCheckList, getCheckinStateList } from "@/public/js/check";

const Breadcrumb = () => import("@/components/common/Breadcrumb");
const cityData = require("@/data/cities.json");

export default {
  name: "orderForm",
  components: {
    Breadcrumb
  },
  data() {
    return {
      source: "",
      sourceTitle: "全部来源",
      date: "全部日期",
      dateStr: "全部日期",
      depositTile: "全部押金状态",
      state: "",
      content: {
        firstTitle: "订单管理",
        secondTitle: "预定订单管理",
        type: "close"
      },
      checkList: [],
      stayPerson: "",
      orderNum: "",
      search: "",
      orders: [],
      orderCount: 0,
      cities: [],
      showRemark: false,
      remark: "",
      id: null,
      addSourcel: [],
      name: null,
      pageNo: 1,
      pageSize: 10,
      startTime: "",
      endTime: "",
      counts: 0,
      stateStr: "入住状态",
      dateType: "",

      bills: "",
      isDisable: true,
      formDates: [],
      loading: false,
      deposit: "",
      validOrder: "",
      cancelOrder: ""
    };
  },
  created() {
    this.getData();
    this._geSourceList();
  },
  mounted() {},
  methods: {
    timeSearch(val) {
      this.pageNo = 1;
      this.startTime = val[0];
      this.endTime = val[1];
      this.getData();
    },
    setDeposit(data) {
      this.depositTile = data.title;
      this.deposit = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getData();
    },
    //获取来源列表
    _geSourceList() {
      geSourceList().then(res => {
        this.addSourcel = res.data.orderSourcels;
      });
    },
    // 获取有效
    _getCheckinStateList(data) {
      getCheckinStateList(data).then(res => {
        this.validOrder = res.data.validOrder;
        this.cancelOrder = res.data.cancelOrder;
        this.loading = false;
      });
    },
    setSource(data) {
      this.sourceTitle = data.title;
      this.source = data.value;
      this.pageSize = 10;
      this.pageNum = 1;
      this.getData();
    },
    //获取入住单列表
    getData() {
      let fromData = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        dateType: this.dateType,
        startTime: this.startTime,
        endTime: this.endTime,
        state: this.state,
        name: this.name,
        search: this.search,
        bills: this.bills,
        deposit: this.deposit,
        source: this.source
      };
      getCheckList(fromData).then(res => {
        if (!res.data.errCode) {
          (this.checkList = res.data.checkInList),
            (this.counts = res.data.total);
          this._getCheckinStateList(fromData);
        }
      });
    },
    //查询
    searchCheckList() {
      this.pageNo = 1;
      this.pageSize = 10;
      this.getData();
    },

    //入住状态
    setState(command) {
      this.stateStr = command.title;
      this.state = command.id;
      this.pageNo = 1;
      this.pageSize = 10;
      this.getData();
    },
    //时间类型
    setDate(command) {
      this.dateStr = command.title;
      this.dateType = command.id;
      this.formDates = [];
      if (command.id) {
        this.isDisable = false;
      } else {
        this.isDisable = true;
        this.pageNo = 1;
        this.pageSize = 10;
        this.getData();
      }
    },
    particulars(id) {
      this.$router.push("/index/checkIn-detail?id=" + id);
    },
    getOrders() {
      getOrders(this.$route.query).then(res => {
        this.orders = res.data.orderInfoEntities;
        this.orderCount = res.data.total;
      });
    },
    getCities() {
      this.cities = cityData.provincesEntities;
    },
    setQuery(data) {
      if (
        data.title === "全部来源" ||
        data.title === "美团" ||
        data.key === "source"
      ) {
        this.source = data.title;
        this.sourceData = data.value;
      } else if (
        data.title === "下单日期" ||
        data.title === "入住日期" ||
        data.title === "离店日期" ||
        data.title === "全部日期"
      ) {
        this.date = data.title;
        this.dateData = data.value;
      } else if (
        data.title === "全部状态" ||
        data.title === "待确认" ||
        data.title === "待入住" ||
        data.title === "待退款" ||
        data.title === "已完成"
      ) {
        this.state = data.title;
        this.stateData = data.value;
      }
      this.$router.replace({
        patch: this.$route.patch,
        query: Object.assign({}, this.$route.query, {
          [data.key]: data.value
        })
      });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getData();
    },
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getData();
    },
    handleSearch() {
      this.getData();
    },
    handleCascader(values) {
      this.setQuery({
        key: "city",
        value: values[0]
      });
    },
    print() {
      window.print();
    },
    showRemarkModal(id) {
      this.id = id;
      this.showRemark = true;
    },
    updateMark(id) {
      if (!this.remark) {
        return this.$message({
          message: "请输入备注",
          type: "warning"
        });
      }

      this.showRemark = false;

      updateMark(this.id, this.remark).then(() => {
        this.$message({
          message: "备注成功",
          type: "success"
        });
      });
    }
  },
  watch: {
    $route() {
      this.getOrders();
    },
    formDates(newValue) {
      this.startTime = newValue[0];
      this.endTime = newValue[1];
    }
  }
};
</script>
<style lang="scss" scoped>
.el-input__inner {
  height: 34px;
}
.el-date-editor--daterange.el-input__inner {
  padding: 0;
  padding-left: 10px;
  width: auto;
}
</style>
